/*
  学习目标：子传父 - 子组件花钱爸爸的钱
*/

import React from 'react';
export default class Parent extends React.Component {
  state = {
    money: 1000,
  };

  handleMakeMoney = () => {
    this.setState({
      money: 1000 + this.state.money,
    });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleMakeMoney}>爸爸开始赚钱了</button>
        <Child
          money={this.state.money}
          // 2. 💥 父组件, 给子组件传递回调函数
          handleCost={this.handleCost}
        />
      </div>
    );
  }

  // 1. 父组件内， 定义修改的回调函数
  handleCost = (num) => {
    console.log('num  ----->  ', num);
    // 4. 父组件内， 通过setState修改数据
    this.setState({ money: this.state.money - num });
  };
}

class Child extends React.Component {
  render() {
    const { money, handleCost } = this.props;
    return (
      <div>
        <h1>爸爸给我钱了： {money} </h1>
        <button
          // 3. 💥 子组件, 调用父组件传来的回调函数
          onClick={() => handleCost(5000)}
        >
          吞金兽要花钱
        </button>
      </div>
    );
  }
}
